<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 响应式 : MVVM-数据驱动-vue监控数据变化，当数据发生变换时与之关联的DOM元素也会更新 -->
    <!-- 
        模板语法是为页面渲染提供特殊定义代码规则
            + 内容插值语法：向标页面直接填充内容的语法
                * 不会解析\n转义符
                * 不会解析字符串标签
                    => vue的插值表达式使用的是 textConent 属性完成DOM内容填充的
                    => vue的插值表达式实际上就是对vue中已经定义的方法进行调用执行
        
        面试问题:vue中data为什么必须是一个方法？
                是为了让data使用工厂函数模式，这样vue运行时都会重新构建基于定义结果的新仓库数据对象，
                为了在后续的vue配置复用过程中，让数据仓库的数据相互独立，不产生共享情况
    -->
    <div id="app">
        <!-- 
            innerHTML => 会解析标签
            innerText => 不解析标签，但会将\n转义符转换为 br 标签
            textContent => 即不解析标签，也不解析转义符
         -->
        <p>str:{{ str }}</p>
        <p>htmlStr:{{ htmlStr }}</p>
    </div>
    <hr>
    <div id="root">
        <p>str:{{ str }}</p>
        <p>htmlStr:{{ htmlStr }}</p>
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js"
        // import { createApp } from "../assets/vue3/vue.esm-browser-itany.js"

        let data = function(){
            return {
                str:"第一段文本\n第二段文本\n第三段文本",
                htmlStr:"<span style='color:red'>标签文本值</span>"
            }
        }
        // let data = {
        //     str:"第一段文本\n第二段文本\n第三段文本",
        //     htmlStr:"<span style='color:red'>标签文本值</span>"
        // }

        const app = createApp({
            // 工厂函数模式 ==> 对象的深度克隆
            data:data
        })
        let vm = app.mount("#app")
        console.log(vm)

        createApp({
            data:data
        }).mount("#root")
    </script>
</body>
</html>